<template>
  <div id="app">
    <!-- <School /> -->
    <!-- <Student @getName="getName"  /> -->
    <!-- <Student />   -->
    <!-- 组件使用原生事件需要用native配合使用 -->
    <!-- <hr>
    <Test />
    <hr><br>
    <Test2 />
    <hr><br>
    <getStudent /> -->

    <!-- github案例 -->
     <!-- <div class="container">
      <Search />
      <List />
    </div> -->

    <!-- 默认插槽 -->
    <!-- <Category :title="'美食'">
      <img src="http://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <Category :title="'游戏'">
      <ul>
          <li v-for="item,index in games" :key="index">{{item}}</li>
      </ul>
    </Category>
    <Category :title="'电影'">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category> -->

    <!-- 具名插槽 -->
    <!-- <CategoryName :title="'美食'">
      <img slot="center" src="http://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer" href="http://atguigu.com" target="_blank" rel="noopener noreferrer">更多美食</a>
    </CategoryName>
    <CategoryName :title="'游戏'">
      <ul slot="center">
          <li v-for="item,index in games" :key="index">{{item}}</li>
      </ul>
      <div slot="footer" class="footer">
        <a href="http://atguigu.com" target="_blank" rel="noopener noreferrer">单机游戏</a>
        <a href="http://atguigu.com" target="_blank" rel="noopener noreferrer">网络游戏</a>
      </div>
    </CategoryName>
    <CategoryName :title="'电影'">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <div slot="footer" class="footer">
        <a href="http://atguigu.com" target="_blank" rel="noopener noreferrer">经典</a>
        <a href="http://atguigu.com" target="_blank" rel="noopener noreferrer">热门</a>
        <a href="http://atguigu.com" target="_blank" rel="noopener noreferrer">推荐</a>
      </div>
    </CategoryName> -->

    <!-- 作用域插槽 -->
    <CategoryScope :title="'游戏'">
    <template slot-scope="{Innergames}">
        <div>
          <ul>
            <li v-for="item,index in Innergames" :key="index">{{item}}</li>
          </ul>
        </div>
      </template>
    </CategoryScope>
    <CategoryScope :title="'游戏'">
      <template v-slot="{Innergames}">
        <div>
          <ol>
              <li v-for="item,index in Innergames" :key="index">{{item}}</li>
          </ol>
        </div>
      </template>
    </CategoryScope>
     <CategoryScope :title="'游戏'">
       <template v-slot="{Innergames}">
          <div>
              <h4 v-for="item,index in Innergames" :key="index">{{item}}</h4>
          </div>
      </template>
    </CategoryScope>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/StudentProps.vue'

import Test from '../22_过渡动画/index.vue'
import Test2 from '../22_过渡动画/index2.vue'

import getStudent from '../23_发送axios请求/getStdents.vue'

import Search from '../24_Github案例/search.vue'
import List from '../24_Github案例/List.vue'

import Category from '../25_插槽/01_默认插槽/Category.vue'
import CategoryName from '../25_插槽/02_具名插槽/Category.vue'
import CategoryScope from '../25_插槽/03_作用域插槽/Category.vue'
export default {
  name: 'App',
  components: {
    School, Student,Test,Test2,
    getStudent,
    Search,List,
    Category,CategoryName,CategoryScope
  },
  data () {
    return {
      message:'',
      foods:["火锅🍲",'烧烤🔥','小龙虾🦞','牛排🐂'],
      games:['金铲铲','王者荣耀','地铁跑酷','吃鸡'],
      films:['《你好，李焕英》','《拆弹专家》','《二十五小时》','《超级马里奥》']
    }
  },
  methods: {
   
  },
  mounted() {
  },
}
</script>

<style>
  * {
    box-sizing: border-box;
  }
  #app, .footer{
    display: flex;
    justify-content: space-around;
  }
</style>
